<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <div>
      <button @click="add">给上面的sumNum加加</button>
      <button @click="add2">给上面的sumNum加2</button>
      <button @click="add3">给上面的sumNum加加2</button>
      <button @click="add4">给上面的sumNum加3</button>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  name: "home",
  methods: {
    add() {
      this.$store.commit("add"); // commit mutation
      this.$store.dispatch("asyncAdd"); // dispatch action
    },
    add2() {
      this.$store.commit("addNum", 2); // 传递payload
    },
    add3() {
      this.add(); // commit mutation
      this.asyncAdd2(); // dispatch action
    },
    add4() {
      this.addNum(3);
    },
    ...mapMutations(["add", "addNum"]),
    ...mapActions({
      asyncAdd2: "asyncAdd" // 重命名
    })
  },
  computed: {
    ...mapState(["num"])
  }
};
</script>